<template>
  <div>
    <van-nav-bar title="答谢医生" left-text="" left-arrow @click-left="onClickLeft" />
    <img src="../../img/QQ.png" alt="" class="deliver-img">
    <p class="deliver-name">吴明</p>
    <p class="deliver-x">选择一面锦旗，感谢下医生对您健康帮助吧~</p>
    <div class="deliver-jq">
      <div>
        <img src="../../img/锦旗.png" alt="">
      </div>
    </div>
    <span class="num">人已送</span>
    <!-- 锦旗 -->
    <div class="deliver-jqD">
      <img src="../../img/锦旗.png" alt="" class="jinqi">
    </div>
    <p class="jing">医术精湛<span class="m">￥1.00</span></p>
    <button class="deliver-btn">立即送出</button>
  </div>
</template>
<script setup lang="ts">
const onClickLeft = () => history.back();
</script>
<style scoped>
.deliver-img{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-left: 40%;
  margin-top: 30px;
}
p{
  text-align: center;
}
.deliver-name{
  font-size: 35px;
  font-weight: 600;
  margin: 15px 0;
}
.deliver-jq{
  margin-bottom: 50px;
}
.deliver-jq>div{
  width: 15%;
  background-color: #F5F5F5;
  border-radius: 10px;
  margin-left: 5%;
}
.deliver-jq>div>img{
  width: 90%;
  margin-left: 5%;
}
.deliver-x{
  font-size: 24px;
  color: #A2A2A2;
  margin-bottom: 30px;
}
.deliver-jqD{
  margin-bottom: 30px;
}
.num{
  padding: 10px;
  margin-left: 30px;
  background-color: #F5F5F5;
}
.jing{
  position: fixed;
  bottom: 150px;
  left: 35%;
  font-size: 30px;
}
.jinqi{
  width: 40%;
  margin-left: 30%;
  margin-top: 50px;
}
.m{
  color: #FF6950;
  margin-left: 15px;
}
.deliver-btn{
  width: 90%;
  height: 80px;
  margin-left: 5%;
  position: fixed;
  bottom: 20px;
  background-color: #FFC620;
  border: none;
  border-radius: 15px;
  font-size: 30px;
}
</style>
